<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFn"
                        v-model="type"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input
                        style="width: 50%"
                        v-model="typeText"
                        allow-clear
                        placeholder="请输入搜索条件"
                        ><template #suffix>
                          <icon-plus @click="open(0)" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="userId" hide-label>
                    <a-select
                      v-model="form.userId"
                      placeholder="请选择客户"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select v-model="form.firstCharge" allow-clear placeholder="请选择充值途径">
                      <a-option :value="0">首充 </a-option>
                      <a-option :value="1">续充</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="payTemplateId" hide-label>
                    <a-select
                      v-model="form.payTemplateId"
                      placeholder="请选择支付模板"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in templateS" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="type" hide-label>
                    <a-select v-model="form.type" allow-clear placeholder="请选择充值途径">
                      <a-option :value="0">支付宝</a-option>
                      <a-option :value="1">微信</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="refund" hide-label>
                    <a-select v-model="form.refund" allow-clear placeholder="请选择订单状态">
                      <a-option :value="0">退款 </a-option>
                      <a-option :value="1">未退款 </a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addTime"
                      show-time
                      placeholder="请选择开始充值时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endTime"
                      show-time
                      placeholder="请选择结束充值时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addRefundTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addRefundTime"
                      show-time
                      placeholder="请选择开始退款时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addRefundTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addRefundTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endRefundTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endRefundTime"
                      show-time
                      placeholder="请选择结束退款时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addRefundTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addRefundTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endRefundTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addRefundTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endRefundTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addAmount"
                        allow-clear
                        placeholder="开始充值金额"
                      />
                      <a-input
                        hide-button
                        v-model="form.endAmount"
                        allow-clear
                        placeholder="结束充值金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addGiveAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.addGiveAmount"
                        placeholder="开始手续费金额"
                      />
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.endGiveAmount"
                        placeholder="结束手续费金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addPaymentAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.addPaymentAmount"
                        placeholder="开始支付金额"
                      />
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.endPaymentAmount"
                        placeholder="结束支付金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addReceivedAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.addReceivedAmount"
                        placeholder="开始到账金额"
                      />
                      <a-input
                        hide-button
                        allow-clear
                        v-model="form.endReceivedAmount"
                        placeholder="结束到账金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addNumber" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addNumber"
                        allow-clear
                        placeholder="开始充值次数"
                      />
                      <a-input
                        hide-button
                        v-model="form.endNumber"
                        allow-clear
                        placeholder="结束充值次数"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        v-permission="rechargeList"
                        type="primary"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="rechargeList" @click="reset"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button
            type="outline"
            v-permission="exportRechargeList"
            :loading="loading"
            @click="exportRechargeLists"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
          :scroll="scroll"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'stateName'" #cell="{ record }">
                <a-tag color="blue" size="small" v-if="record.number == 1"
                  >首充{{ record.number }}</a-tag
                >
                <a-tag color="red" size="small" v-else>续充{{ record.number }}</a-tag>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag
                  color="red"
                  size="small"
                  v-if="record.refundType == 0 || record.refundType == 1"
                  >退款</a-tag
                >
                <a-tag color="blue" size="small" v-else>成功</a-tag>
              </template>
              <template v-else-if="item.key === 'type'" #cell="{ record }">
                <div v-if="record.type == 0"> 支付宝</div>
                <div v-if="record.type == 1"> 微信</div>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>

              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFn(record)"
                    >详情</a-button
                  >
                  <a-button
                    v-permission="refund"
                    @click="detailFns(record)"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    status="warning"
                    >退款</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：支付金额:{{ numForm.payment_amount }}元
          <span style="margin-left: 10px">到账金额:{{ numForm.received_amount }}元</span>
          <span style="margin-left: 10px">充值金额: {{ numForm.amount }}元</span>
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 详情 -->
    <a-modal v-model:visible="visible" :mask-closable="false" width="800px" title="订单详情">
      <div>
        <a-descriptions :column="2" align="center" title="基础信息" bordered>
          <a-descriptions-item label="客户账号">{{ detail.user.userName }}</a-descriptions-item>
          <a-descriptions-item label="订单类型"
            ><a-tag color="red" size="small" v-if="detail.refundType">退款</a-tag>
            <a-tag color="blue" size="small" v-else>成功</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="订单状态"
            ><a-tag color="red" size="small" v-if="detail.refundType">退款</a-tag>
            <a-tag color="blue" size="small" v-else>成功</a-tag>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="支付信息"
          bordered
        >
          <a-descriptions-item label="充值途径"
            ><div v-if="detail.type == 0"> 支付宝</div>
            <div v-if="detail.type == 1"> 微信</div></a-descriptions-item
          >
          <a-descriptions-item label="充值金额">{{ detail.receivedAmount }}元</a-descriptions-item>
          <a-descriptions-item label="手续费">{{ detail.serviceCharge }} 元</a-descriptions-item>
          <a-descriptions-item label="实付金额">{{ detail.paymentAmount }}元</a-descriptions-item>
          <a-descriptions-item label="充值时间">{{ detail.createTime }}</a-descriptions-item>
          <a-descriptions-item label="客户IP">{{ detail.ip }}</a-descriptions-item>
          <a-descriptions-item label="支付名称">{{ detail.payTemplate.name }}</a-descriptions-item>
          <a-descriptions-item label="支付商户号">{{
            detail.payTemplate.merchantNo
          }}</a-descriptions-item>
          <a-descriptions-item label="商户订单号">{{ detail.outTradeNo }}</a-descriptions-item>
          <a-descriptions-item label="支付订单号">{{ detail.tradeNo }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="其他信息"
          bordered
        >
          <a-descriptions-item label="退款类型">
            <div v-if="detail.refundType == 0"> 标记退款</div>
            <div v-if="detail.refundType == 1"> 原路退回</div>
          </a-descriptions-item>
          <a-descriptions-item label="退款时间">{{ detail.refundTime }} </a-descriptions-item>
          <a-descriptions-item label="退款金额">{{ detail.refundAmount }}元</a-descriptions-item>
          <a-descriptions-item label="退款备注">{{ detail.refundRemarks }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
    <!-- 退款 -->
    <a-modal
      v-model:visible="visibles"
      :on-before-close="beforeClose"
      :mask-closable="false"
      width="800px"
      title="订单退款"
    >
      <div>
        <a-form ref="details" :model="detail">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="detail.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="充值金额" label-col-flex="80px">
                <a-input v-model="detail.paymentAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="总到账" label-col-flex="80px">
                <a-input v-model="detail.receivedAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="detail.createTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="账户余额" label-col-flex="80px">
                <a-input v-model="detail.balance" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="detail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款途径" label-col-flex="80px">
                <a-input v-model="detail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detail.refundAmount"
                  :min="0"
                  :max="detail.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="扣除余额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detail.deductionAmount"
                  :min="0"
                  :max="detail.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detail.refundRemarks"
                  placeholder="请输入退款备注"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundFn(1)">原路退款</a-button>
          <a-button type="primary" status="success" @click="refundFn(0)">手动退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea
        style="width: 100%"
        v-model="card"
        placeholder="请输入搜索条件，一行一个"
        allow-clear
      />

      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { rechargeList, refund, balanceUser, exportRechargeList, templatesList } from '@/api/url'
  import useCommonStore from '@/store/modules/common'
  import { formpost, get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  const pagination = usePagination(doRefresh)
  const rowKey = useRowKey('id')
  const table = useTable()
  const useCommon = useCommonStore()
  const userList: any = ref([])
  const visible = ref(false)
  const visibles = ref(false)
  const seachForm = ref()
  const details = ref()
  const loading = ref(false)
  const card = ref('')
  const cardsVisible = ref(false)
  const merchantTypeList: any = ref([])
  const scroll = {
    x: 1500,
  }
  const typeLists = ref([
    {
      name: '商户订单号',
      value: 'outTradeNo',
    },
    // {
    //   name: '支付订单号',
    //   value: 'tradeNo',
    // },
    {
      name: '客户下单IP',
      value: 'ip',
    },
  ])
  const type: any = ref('outTradeNo')
  const typeText: any = ref('')
  const ast = ref(0)
  const detail: any = ref({
    createTime: '2023-08-24 16:12:25',
    id: 1,
    outRefundNo: '20230824161227935011',
    outTradeNo: '20230824161208245823',
    payTemplate: { merchantType: 0, merchantNo: '2021004101656942' },
    payTemplateId: 16,
    paymentAmount: 0,
    receivedAmount: 0,
    refundAmount: 0,
    serviceCharge: 0,
    tradeNo: '2023082422001412911428476242',
    type: 0,
    user: { userName: 'user' },
    userId: 41,
  })
  const form = reactive({
    userId: '',
    outTradeNo: '',
    tradeNo: '',
    type: '',
    addTime: '',
    endTime: '',
    refund: '',
    addRefundTime: '',
    endRefundTime: '',
    ip: '',
    firstCharge: '',
    payTemplateId: '',
    addAmount: '', // 开始支付金额
    endAmount: '', // 结束支付金额
    addGiveAmount: '',
    endGiveAmount: '',
    addNumber: '',
    endNumber: '',
    addPaymentAmount: '',
    endPaymentAmount: '',
    addReceivedAmount: '',
    endReceivedAmount: '',
  })
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const tableColumns: any = reactive({
    list: [
      {
        title: '订单ID',
        key: 'id',
        dataIndex: 'id',
        checked: true,
        width: 100,
      },
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 130,
      },
      {
        title: '充值途径',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 100,
      },
      {
        title: '支付金额(元)',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },
      {
        title: '手续费(元)',
        key: 'serviceCharge',
        dataIndex: 'serviceCharge',
        checked: true,
        width: 100,
      },

      {
        title: '充值金额(元)',
        key: 'receivedAmount',
        dataIndex: 'receivedAmount',
        checked: true,
        width: 100,
      },

      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '订单类型',
        key: 'stateName',
        dataIndex: 'stateName',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 180,
        align: 'center',
        checked: true,
      },
    ],
  })

  function typeFn() {
    for (var key in form) {
      if (key !== type.value) {
        form[key] = ''
      }
    }
  }

  const colse = () => {
    ast.value = 0
    cardsVisible.value = false
  }
  const open = (val: any) => {
    ast.value = val
    cardsVisible.value = true
  }
  function cardsFn() {
    if (ast.value == 0) {
      const arr = card.value.split(/\n/g)
      typeText.value = arr.toString()
      cardsVisible.value = false
    }
  }

  const merchantType = () => {
    get({
      url: templatesList,
      data: {},
    }).then((res: any) => {
      merchantTypeList.value = res.data.list
    })
  }

  const reset = () => {
    seachForm.value.resetFields()
    form.endAmount = ''
    form.endGiveAmount = ''
    form.endNumber = ''
    form.endPaymentAmount = ''
    form.endReceivedAmount = ''
    doRefresh(1)
  }
  const detailFn = (val: any) => {
    detail.value = JSON.parse(JSON.stringify(val))
    visible.value = true
  }

  const beforeClose = () => {
    details.value.resetFields()
    visibles.value = false
  }

  const detailFns = (val: any) => {
    detail.value = JSON.parse(JSON.stringify(val))
    if (detail.value.type == 0) {
      detail.value.typeName = '支付宝'
    } else {
      detail.value.typeName = '微信'
    }
    get({
      url: balanceUser,
      data: () => {
        return {
          id: detail.value.userId,
        }
      },
    })
      .then((res) => {
        detail.value.balance = res.data
        detail.value.refundAmount = detail.value.paymentAmount
        detail.value.deductionAmount = detail.value.receivedAmount
        visibles.value = true
      })
      .catch(console.log)
  }

  const exportRechargeLists = () => {
    loading.value = true
    Object.keys(form).forEach(function (key: any) {
      if (key == type.value) {
        form[key] = typeText.value
      }
    })
    useCommon
      .downLoads(exportRechargeList, form, '预存列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  const refundFn = (val: any) => {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: refund,
          data: () => {
            return {
              id: detail.value.id,
              refundAmount: detail.value.refundAmount,
              deductionAmount: detail.value.deductionAmount,
              refundRemarks: detail.value.refundRemarks,
              refundType: val,
            }
          },
        })
          .then((res) => {
            console.log(res)
            if (res.code == 0) {
              Message.success(res.msg)
              beforeClose()
              doRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }

  const numForm: any = ref({})
  function numFn() {
    get({
      url: '/app/user/balance/recharge/get/statistics',
      data: {
        ...form,
      },
    }).then((res) => {
      numForm.value = res.data
    })
  }

  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    Object.keys(form).forEach(function (key: any) {
      if (key == type.value) {
        form[key] = typeText.value
      }
    })
    get({
      url: rechargeList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form,
        }
      },
    })
      .then((res) => {
        numFn()
        tableLoading.value = false
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
      console.log(userList)
    })
  }

  const templateS: any = ref([])
  function getLists() {
    useCommon.templatesListFn(true).then((res: any) => {
      templateS.value = res.data
    })
  }

  onMounted(async () => {
    await doRefresh()
    await getList()
    await merchantType()
    await getLists()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
</style>
